<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast, Dialog } from "vant";
import DistributionInfoApi from '../api/distribution'
import store from "../../../store";
import _ from "lodash";
import axios from "axios";
const isAdmin = store.getters.roles.includes('super_admin')
onMounted(() => {
    loading.value = true
    // queryByCond()
})
const formState = ref({
    secureWrite: "",
    receiverIds: ""
})



const router = useRouter();
const onClickLeft = () => router.push('/main');
const onClickRight = () => router.push('/recordsInfo/add');
const loading = ref(false)
// 列表数据
const dataSorce = ref({
    list: []
})
// 获取列表数据
const finished = ref(false);
const pageSize = ref(10)
const pageNum = ref(1)

const queryByCond = () => {
    return new Promise((resolve, reject) => {
        DistributionInfoApi.queryByCond({}, pageSize.value, pageNum.value)
            .then((response) => {
                loading.value = false
                const data = response.data
                if (data.code === 200) {
                    dataSorce.value.list = dataSorce.value.list.concat(data.data.records);
                    if (data.data.pages == data.data.current) {
                        finished.value = true;
                        return;
                    }
                    pageNum.value += 1;
                } else {
                    Toast.fail(data.message);
                    reject();
                }
            })
            .catch((error) => {
                loading.value = false
                if (error.message !== "") {
                    Toast.fail(error.message);
                }
                reject(error);
            });
    });
}
const options = ref({
    penColor: '#000000',
    minWidth: 2,
    maxWidth: 2,
    backgroundColor: "rgba(255, 255, 255)",
});
const handleProcess = (row) => {
    router.push({
        path: '/distributionProcess',
        query: {
            distributionId: row.distributionId,
            content: row.content,
            relationId: row.relationId
        }
    })
}
const handleExport = () => {

}
const handleDelete = (row) => {
    Dialog.confirm({
        title: '警告',
        message: '是否确认删除？'
    }).then(() => {
        const param = Object.assign({}, row)
        DistributionInfoApi.delete(param).then(response => {
            const data = response.data
            if (data.code === 200) {
                Toast.success("删除成功")
                pageNum.value = 1
                dataSorce.value.list=[]
                queryByCond();
            } else {
                Toast.fail("删除失败")
            }

        })
    }).catch(() => {
        // on cancel
    });
}
const handleWrite = (row) => {
     
    router.push({
        path: '/distributionAdd',
        query: {
            distributionId: row.distributionId,
            nodeId: row.relationId,
            isRoot:row.isRoot
        }
    })
}

const handleDwon = (row) => {
    Dialog.confirm({
        title: '警告',
        message: '是否确认销毁？'
    }).then(() => {
        
        DistributionInfoApi.destroyFile({ distributionId: row.distributionId, nodeId: row.relationId }).then(response => {
            const data = response.data
            if (data.code === 200) {
                Toast.success("销毁成功")
                pageNum.value = 1
                dataSorce.value.list=[]
                queryByCond();
            } else {
                Toast.fail("销毁失败")
            }

        })
    }).catch(() => {
        // on cancel
    });
}




const onLoad = _.debounce(() => {
    queryByCond();
}, 1000);
</script>

<template>
    <div class="list-page">
        <van-nav-bar title="分发记录" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">

        </van-nav-bar>

        <van-list class="list" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-loading v-if="loading" size="24px" color="#1890ff" vertical>加载中...</van-loading>
            <div v-else>
                <van-cell class="list-item" v-for="item in dataSorce.list">
                    <template #default>
                        <div class="blue-bar"></div>
                        <div style="padding:0 18px 18px 18px;display: flex;flex-direction: column;gap: 10px;">
                            <div><span class="groupTitle">分发内容：</span>{{ item.content }}</div>
                            <div><span class="groupTitle">时间：</span>{{ item.sendTime }}</div>
                            <div v-if="item.isRoot"><span class="groupTitle">是否签字：</span>
                                <van-tag plain type="success" v-if="item.status == 2" size="large">
                                    是
                                </van-tag>
                                <van-tag plain type="danger" v-else size="large">否
                                </van-tag>
                            </div>
                            <div v-if="item.isRoot"><span class="groupTitle">是否销毁：</span>
                                <van-tag plain type="success" v-if="item.isDestroyed == 2" size="large">
                                    是
                                </van-tag>
                                <van-tag plain type="danger" v-else size="large">否
                                </van-tag>
                            </div>
                        </div>
                        <div style="display: flex; justify-content: center; gap: 20px;">
                            <van-button type="primary" size="small" @click.stop="handleProcess(item)"
                                style="flex: 1%;font-size: 16px;">流程图</van-button>
                            <!-- <van-button type="warning" size="small" @click.stop="handleExport()"
                                style="flex: 1%;font-size: 16px;" v-if="isAdmin">&nbsp统计&nbsp</van-button> -->
                            <van-button type="danger" size="small" @click.stop="handleDelete(item)"
                                style="flex: 1%;font-size: 16px;" v-if="!item.isRoot">&nbsp删除&nbsp</van-button>
                            <van-button type="warning" size="small" @click.stop="handleWrite(item)"
                                style="flex: 1%;font-size: 16px;" v-if="item.isRoot"
                                v-bind:disabled="item.status ==2">&nbsp签收&nbsp</van-button>
                            <van-button type="danger" size="small" @click.stop="handleDwon(item)"
                                v-bind:disabled="(item.status == 1 && item.isDestroyed == 1) || item.isDestroyed == 2"
                                style="flex: 1%;font-size: 16px;" v-if="item.isRoot">&nbsp销毁&nbsp</van-button>
                        </div>
                    </template>
                </van-cell>
            </div>
        </van-list>
    </div>


</template>

<style scoped>
.list-page {
    background: #ebedf0;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.list {
    padding-bottom: 60px;
}

.list-item {
    margin: 16px 16px 0 16px;
    border-radius: 8px;
    width: auto;
}

.blue-bar {
    background: #1989fa;
    width: 2px;
    height: 16px;
    display: inline-block;
    position: absolute;
    top: 3px;
    border-radius: 5px;
}

.item-title {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 800;
}

.groupTitle {
    width: 70%;
    font-weight: bold;
    color: #000;
}
</style>